<!--
Vue 3 中的插槽（Slots）是一个强大的功能，允许开发者在组件中定义可插入的内容。以下是对 Vue 3 插槽使用的总结说明：

  1. 基本插槽
  基本插槽是最简单的插槽形式，可以在父组件中向子组件传递内容。
  vue
  子组件
  <template>
    <div>
      <slot></slot>
    </div>
  </template>
  vue
  父组件
  <template>
    <ChildComponent>
      <p>这是插入的内容</p>
    </ChildComponent>
  </template>
  2. 具名插槽
  具名插槽允许你定义多个插槽，并通过名字来区分它们。
  vue
  子组件
  <template>
    <div>
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  </template>
  vue
  父组件 
  <template>
    <ChildComponent>
      <template v-slot:header>
        <h1>标题</h1>
      </template>
      
      <p>这是主体内容</p>
      
      <template v-slot:footer>
        <footer>页脚内容</footer>
      </template>
    </ChildComponent>
  </template>
  3. 插槽属性
  插槽还可以传递数据给插槽内容，使用插槽属性（slot props）。
  vue
  子组件
  <template>
    <div>
      <slot :message="greeting"></slot>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        greeting: 'Hello from Child Component'
      };
    }
  };
  </script>
  vue
  父组件
  <template>
    <ChildComponent v-slot:default="{ message }">
      <p>{{ message }}</p>
    </ChildComponent>
  </template>
  4. 作用域插槽
  作用域插槽是指插槽可以接收来自子组件的数据，父组件可以使用这些数据。
  vue
  子组件
  <template>
    <div>
      <slot :data="someData"></slot>
    </div>
  </template>
  vue
  父组件 
  <template>
    <ChildComponent v-slot="{ data }">
      <p>接收到的数据: {{ data }}</p>
    </ChildComponent>
  </template>

  5. 默认插槽内容
  可以为插槽提供默认内容，当父组件没有提供内容时，会使用默认内容。
  vue
  子组件 
  <template>
    <slot>默认内容</slot>
  </template>
  6. 动态插槽
  可以根据条件动态选择插槽。
  vue
  <template>
    <ChildComponent>
      <template v-if="isHeader" v-slot:header>
        <h1>动态标题</h1>
      </template>
      <template v-else v-slot:footer>
        <footer>动态页脚</footer>
      </template>
    </ChildComponent>
  </template>
  总结
  Vue 3 的插槽功能使得组件之间的内容传递更加灵活和强大。通过基本插槽、具名插槽、插槽属性和作用域插槽等不同形式，可以实现复杂的 UI 组件结构和数据交互。理解和掌握插槽的使用，可以大大提高 Vue 应用的可维护性和可复用性。
-->
<template>
  <div class="app">
    <h3>1. 默认插槽(Default slot)</h3>
    <default-slot title="默认插槽">
      <template #default>
        <div class="default-slot">
          <p>默认插槽(Default slot)</p>
        </div>
      </template>
    </default-slot>

    <h3>2.1 具名插槽(Named Slot)</h3>
    <named-slot>
      <template #left>
        <div class="left-slot">
          <span>具名插槽(left slot)</span>
        </div>
      </template>
      <template #center>
        <div class="center-slot">
          <span>具名插槽(center slot)</span>
        </div>
      </template>
      <template #right>
        <div class="right-slot">
          <span>具名插槽(right slot)</span>
        </div>
      </template>
    </named-slot>

    <h3>2.2 动态插槽(Dynamic Slot): 只给一个插槽传入数据</h3>
    <named-slot>
      <template v-slot:[position]>
        <a href="#">注册</a>
      </template>
    </named-slot>
    <button @click=" position = 'left' ">左边</button>
    <button @click=" position = 'center' ">中间</button>
    <button @click=" position = 'right' ">右边</button>

    <h3>3. 作用域插槽(Scope slot)</h3>
    <p>作用域插槽是指插槽可以接收来自子组件的数据，父组件可以使用这些数据。</p>
    <h4>3.1 button</h4>
    <scope-slot :titles="['衣服', '鞋子', '裤子']" 
                :currentIndex="currentIndex"
                @tab-item-click="tabItemClick">
      <!-- 
        接收子组件的数据的三种方式：
        1. v-slot:default="props"
        2. #default="props"
        3. v-slot="props"
      -->
      <template #default="slotProps">
        <button :class="{active: slotProps.index === currentIndex}">
          {{ slotProps.item }}
        </button>
      </template>
    </scope-slot>

    <h4>3.1 button</h4>
    <scope-slot :titles="['衣服', '鞋子', '裤子']" 
                :currentIndex="currentIndex"
                @tab-item-click="tabItemClick">
      <template v-slot:default="slotProps">
        <a href="#" :class="{active: slotProps.index === currentIndex}">
          {{ slotProps.item }}
        </a>
      </template>
    </scope-slot>

  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import DefaultSlot from './components/DefaultSlot.vue'
  import NamedSlot from './components/NamedSlot.vue'
  import ScopeSlot from './components/ScopeSlot.vue'
  
  const position = ref('left')
  const currentIndex = ref(0)

  const tabItemClick = (index) => {
    currentIndex.value = index
  }

</script>

<style lang="scss" scoped>
  .default-slot {
    color: red;
    background-color: orange;
  }

  .active {
    color: orange;
    font-weight: bold;
    font-size: 25px;
  }
</style>
